<route lang="json5" type="page">
{
  "layout": "theme",
  "style": {
    "navigationBarTitleText": "主题设置",
    "enablePullDownRefresh": false
  }
}
</route>

<script setup lang="ts">
import type { Theme } from '@/store'
import { computed } from 'vue'
import { PRESET_COLORS } from '@/config/theme'
import { useThemeStore } from '@/store'

// 使用主题 Store
const themeStore = useThemeStore()

// 主题选项
const themes: { value: Theme, label: string, icon: string, desc: string }[] = [
  {
    value: 'light',
    label: '浅色模式',
    icon: '☀️',
    desc: '经典的浅色界面，适合日间使用',
  },
  {
    value: 'dark',
    label: '深色模式',
    icon: '🌙',
    desc: '护眼的深色界面，适合夜间使用',
  },
  {
    value: 'auto',
    label: '跟随系统',
    icon: '🔄',
    desc: '自动跟随系统主题设置',
  },
]

// 使用配置文件中的预定义颜色
const predefinedColors = PRESET_COLORS

// 计算属性
const currentThemeInfo = computed(() => {
  return themes.find(t => t.value === themeStore.currentTheme)
})

// 设置主题
function setTheme(theme: Theme) {
  themeStore.setTheme(theme)

  const themeNames = {
    light: '浅色模式',
    dark: '深色模式',
    auto: '跟随系统',
  }

  uni.showToast({
    title: `已切换到${themeNames[theme]}`,
    icon: 'none',
    duration: 1500,
  })
}

// 设置主色调
function setPrimaryColor(color: string) {
  themeStore.setPrimaryColor(color)

  uni.showToast({
    title: '主色调已更新',
    icon: 'success',
    duration: 1000,
  })
}

// 重置主题
function resetTheme() {
  uni.showModal({
    title: '确认重置',
    content: '确定要重置所有主题设置吗？',
    success: (res) => {
      if (res.confirm) {
        themeStore.resetTheme()
        uni.showToast({
          title: '主题设置已重置',
          icon: 'success',
          duration: 1500,
        })
      }
    },
  })
}
</script>

<template>
  <view class="theme-page">
    <!-- 当前主题状态 -->
    <view class="current-status">
      <view class="status-card">
        <view class="status-icon">
          {{ currentThemeInfo?.icon }}
        </view>
        <view class="status-info">
          <text class="status-title">
            {{ currentThemeInfo?.label }}
          </text>
          <text class="status-desc">{{ currentThemeInfo?.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 主题模式选择 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">主题模式</text>
        <text class="title-desc">选择您喜欢的界面风格</text>
      </view>

      <view class="theme-options">
        <view
          v-for="theme in themes"
          :key="theme.value"
          :class="{
            active: themeStore.currentTheme === theme.value,
          }"
          :style="{
            backgroundColor: themeStore.currentTheme === theme.value ? themeStore.getPrimaryColor : (themeStore.isDarkMode ? '#2a2a2a' : '#ffffff'),
            color: themeStore.currentTheme === theme.value ? '#ffffff' : (themeStore.isDarkMode ? '#ffffff' : '#333333'),
          }"
          class="theme-option"
          @click="setTheme(theme.value)"
        >
          <view class="option-icon">
            {{ theme.icon }}
          </view>
          <view class="option-content">
            <text class="option-title">{{ theme.label }}</text>
            <text class="option-desc">{{ theme.desc }}</text>
          </view>
          <view class="option-check">
            <text v-if="themeStore.currentTheme === theme.value">✓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 主色调设置 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">主色调</text>
        <text class="title-desc">自定义您的专属色彩</text>
      </view>

      <view class="color-picker">
        <view
          v-for="item in predefinedColors"
          :key="item.color"
          :style="{ backgroundColor: item.color }"
          :class="{
            active: themeStore.getPrimaryColor === item.color,
          }"
          class="color-item"
          @click="setPrimaryColor(item.color)"
        >
          <view v-if="themeStore.getPrimaryColor === item.color" class="color-check">
            ✓
          </view>
        </view>
      </view>

      <view class="color-labels">
        <text
          v-for="item in predefinedColors"
          :key="item.color"
          :class="{
            active: themeStore.getPrimaryColor === item.color,
          }"
          class="color-label"
        >
          {{ item.name }}
        </text>
      </view>
    </view>

    <!-- 效果预览 -->
    <view class="section">
      <view class="section-title">
        <text class="title-text">效果预览</text>
        <text class="title-desc">查看当前主题的视觉效果</text>
      </view>

      <view class="preview-area">
        <view
          class="preview-card"
          :style="{
            backgroundColor: themeStore.isDarkMode ? '#2a2a2a' : '#ffffff',
            borderColor: themeStore.isDarkMode ? '#333333' : '#e5e5e5',
            color: themeStore.isDarkMode ? '#ffffff' : '#333333',
          }"
        >
          <view class="card-header">
            <text
              class="card-title"
              :style="{
                color: themeStore.getPrimaryColor,
              }"
            >
              示例卡片
            </text>
            <view
              class="card-badge"
              :style="{
                backgroundColor: themeStore.getPrimaryColor,
              }"
            >
              NEW
            </view>
          </view>
          <text class="card-content">
            这是一段示例文本，用于展示当前主题下的文字显示效果。支持多行文本显示，可以清晰地查看文字的对比度和可读性。
          </text>
          <view class="card-actions">
            <button
              class="action-btn primary"
              :style="{
                backgroundColor: themeStore.getPrimaryColor,
                color: '#ffffff',
              }"
            >
              主要按钮
            </button>
            <button
              class="action-btn secondary"
              :style="{
                backgroundColor: 'transparent',
                color: themeStore.getPrimaryColor,
                borderColor: themeStore.getPrimaryColor,
              }"
            >
              次要按钮
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="actions">
      <button class="reset-btn" @click="resetTheme">
        重置设置
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.theme-page {
  min-height: 100vh;
  background-color: var(--page-bg);
  color: var(--text-color);
  padding: 30rpx;
  transition: all 0.3s ease;
}

.current-status {
  margin-bottom: 40rpx;

  .status-card {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: var(--card-bg);
    border-radius: 20rpx;
    backdrop-filter: blur(10px);
    border: 2rpx solid var(--primary-color);
    box-shadow: var(--shadow-light);

    .status-icon {
      font-size: 48rpx;
      margin-right: 24rpx;
    }

    .status-info {
      flex: 1;

      .status-title {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 8rpx;
      }

      .status-desc {
        font-size: 26rpx;
        opacity: 0.7;
      }
    }
  }
}

.section {
  margin-bottom: 50rpx;

  .section-title {
    margin-bottom: 30rpx;

    .title-text {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 8rpx;
    }

    .title-desc {
      font-size: 26rpx;
      opacity: 0.6;
    }
  }
}

.theme-options {
  .theme-option {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 20rpx;
    background: var(--card-bg);
    border-radius: 16rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;

    &.active {
      border-color: var(--primary-color);
      background: var(--primary-color);
      color: white;

      .option-desc {
        opacity: 0.8;
      }
    }

    &:hover {
      transform: translateY(-2rpx);
      box-shadow: var(--shadow-light);
    }

    .option-icon {
      font-size: 36rpx;
      margin-right: 24rpx;
    }

    .option-content {
      flex: 1;

      .option-title {
        display: block;
        font-size: 30rpx;
        font-weight: 500;
        margin-bottom: 6rpx;
      }

      .option-desc {
        font-size: 24rpx;
        opacity: 0.6;
      }
    }

    .option-check {
      font-size: 24rpx;
      font-weight: bold;
    }
  }
}

.color-picker {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
  margin-bottom: 20rpx;

  .color-item {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border: 3rpx solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &.active {
      border-color: var(--text-color);
      transform: scale(1.2);
    }

    &:hover {
      transform: scale(1.1);
    }

    .color-check {
      color: white;
      font-size: 20rpx;
      font-weight: bold;
      text-shadow: 0 0 4rpx rgba(0, 0, 0, 0.5);
    }
  }
}

.color-labels {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;

  .color-label {
    font-size: 22rpx;
    opacity: 0.6;
    text-align: center;
    min-width: 60rpx;
    transition: all 0.3s ease;

    &.active {
      opacity: 1;
      font-weight: 500;
      color: var(--primary-color);
    }
  }
}

.preview-area {
  .preview-card {
    padding: 30rpx;
    background: var(--card-bg);
    border-radius: 16rpx;
    border: 1rpx solid var(--border-color);
    box-shadow: var(--shadow-light);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .card-title {
        font-size: 30rpx;
        font-weight: 600;
        color: var(--primary-color);
      }

      .card-badge {
        background: var(--primary-color);
        color: white;
        font-size: 20rpx;
        padding: 6rpx 12rpx;
        border-radius: 20rpx;
      }
    }

    .card-content {
      font-size: 26rpx;
      line-height: 1.6;
      opacity: 0.8;
      margin-bottom: 30rpx;
    }

    .card-actions {
      display: flex;
      gap: 20rpx;

      .action-btn {
        flex: 1;
        padding: 16rpx 32rpx;
        border-radius: 12rpx;
        font-size: 26rpx;
        transition: all 0.3s ease;

        &.primary {
          background: var(--primary-color);
          color: white;
        }

        &.secondary {
          background: transparent;
          color: var(--primary-color);
          border: 2rpx solid var(--primary-color);
        }

        &:hover {
          transform: translateY(-2rpx);
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

.actions {
  margin-top: 60rpx;
  text-align: center;

  .reset-btn {
    padding: 20rpx 60rpx;
    background: transparent;
    color: var(--text-color);
    border: 2rpx solid var(--border-color);
    border-radius: 12rpx;
    font-size: 28rpx;
    transition: all 0.3s ease;

    &:hover {
      background: var(--border-color);
    }

    &:active {
      transform: scale(0.98);
    }
  }
}
</style>
